<template>
  <div class="card">
    <div class="card-header">
      <i class="bi bi-link"></i> 输入网址
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-12 mb-3"> 
          <div class="mb-3">
            <input 
              type="text" 
              class="form-control" 
              id="urlInput" 
              v-model="urlInputText" 
              placeholder="请输入网址"
            />
          </div>
          <div class="d-flex gap-2">
            <button 
              class="btn btn-primary" 
              @click="handleUrlInput" 
              :disabled="isSubmitting || !urlInputText.trim()"
            >
              <span v-if="isSubmitting" class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
              提交网址
            </button>
            <button 
              class="btn btn-outline-secondary" 
              @click="clearUrlInput" 
              :disabled="isSubmitting || !urlInputText.trim()"
            >
              清空
            </button>
          </div>
        </div>
      </div>
      
      <div class="mt-3" v-if="uploadStatus">
        <div :class="`alert ${alertClass} d-flex align-items-center`" role="alert">
          <i :class="`bi ${iconClass} me-2`"></i>
          <div>{{ uploadStatus }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useTaskStore } from '@/stores/taskStore';
import { submitJiangSuUrl } from '@/services/api';

const taskStore = useTaskStore();
const uploadStatus = ref('');
const uploadStatusType = ref<'info' | 'success' | 'error' | 'loading'>('info');
const urlInputText = ref('');
const isSubmitting = ref(false);

// 计算属性
const alertClass = computed(() => {
  switch (uploadStatusType.value) {
    case 'success': return 'alert-success';
    case 'error': return 'alert-danger';
    case 'loading': return 'alert-primary';
    default: return 'alert-info';
  }
});

const iconClass = computed(() => {
  switch (uploadStatusType.value) {
    case 'success': return 'bi-check-circle';
    case 'error': return 'bi-exclamation-triangle';
    case 'loading': return 'bi-arrow-repeat';
    default: return 'bi-info-circle';
  }
});

async function handleUrlInput() {
  if (!urlInputText.value.trim()) {
    showUploadStatus('error', '请输入网址');
    return;
  }
  
  isSubmitting.value = true;
  showUploadStatus('loading', '正在处理网址...');
  
  try {
    // 发送URL请求
    const response = await submitJiangSuUrl(urlInputText.value);
    
    // 显示成功
    showUploadStatus('success', `网址已提交，任务已提交到后台处理`);
    urlInputText.value = '';
    
    // 添加任务到列表
    taskStore.addTask(response.data);
    
    // 显示通知
    taskStore.addNotification('success', '网址提交成功', `任务已提交到后台处理`);
  } catch (error: any) {
    console.error('网址提交错误:', error);
    showUploadStatus('error', `提交失败: ${error.message || '未知错误'}`);
    taskStore.addNotification('error', '网址提交失败', error.message || '未知错误');
  } finally {
    isSubmitting.value = false;
  }
}

function showUploadStatus(type: 'info' | 'success' | 'error' | 'loading', message: string) {
  uploadStatusType.value = type;
  uploadStatus.value = message;
  
  // 如果是成功或错误，3秒后自动清除
  if (type === 'success' || type === 'error') {
    setTimeout(() => {
      uploadStatus.value = '';
    }, 3000);
  }
}

function clearUrlInput() {
  urlInputText.value = '';
}
</script>